import IconArrowLeft from "@/assets/svg/icon-arrow-left";
import IconArrowRight from "@/assets/svg/icon-arrow-right";
import useLazyLoading from "@/utils/useLazyLoad";
import { Carousel, Rate } from "antd";
import React, { memo } from "react";
import { useRef } from "react";
import { useEffect } from "react";
import { useState } from "react";
import ListItem from "./style";
const index = memo((props) => {
  const { itemData, itemWidth,show =true } = props;
  // 懒加载
  useLazyLoading();

  const slite = useRef()
  const changeBanner = (b)=>{
    if(b){
      slite.current.prev()
    }else{
      slite.current.next()
    }
  }
  return (
    <ListItem itemWidth={itemWidth}>
      {
        show && (<div className="imgCover">
        <img loading="lazy" datasrc={itemData.picture_url}></img>
      </div>)
      }
      <div className="banner">
      <div className="left" onClick={e=>changeBanner(true)}>
      <IconArrowLeft/>
      </div>
      <div className="right" onClick={e=>changeBanner(false)}>
      <IconArrowRight/>
      </div>
      <Carousel dots={false} ref={slite}>
        {itemData?.picture_urls?.map((n) => {
          return (
            <div className="imgCover">
              <img loading="lazy" datasrc={n}></img>
            </div>
          );
        })}
      </Carousel>
      </div>
      <div className="title" style={{ color: itemData.verify_info.text_color }}>
        {itemData.verify_info.messages.join(" · ")}
      </div>
      <div className="roomName">{itemData.name}</div>
      <div className="smallFont">{itemData.price_format}/晚</div>
      <div className="smallFont">{itemData.reviews_count}条评论</div>
      <div className="rate">
        {
          <Rate
            style={{ fontSize: "12px", color: "#00848A" }}
            disabled
            defaultValue={itemData?.star_rating ?? 5}
          />
        }
        {itemData?.bottom_info && (
          <span
            className="rate-msg"
            style={{ color: itemData?.bottom_info?.content_color }}
          >
            ·&nbsp;{itemData?.bottom_info?.content}
          </span>
        )}
      </div>
    </ListItem>
  );
});

export default index;
